<template >
  <div v-loading="loading" :element-loading-text="loadtext">
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/tahome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>网上填报</el-breadcrumb-item>
      <el-breadcrumb-item>{{menuTitle}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="report">
      <i class="el-icon-information img "></i>
      <div class="text">
        <div>
          <h4>旅行社季报提交时间</h4>
          <p>旅统基2表-旅行社外联接待入境旅游情况、旅统基3表-旅行社组织接待国内旅游情况、旅统基4表-旅行社组织出境旅游情况，均于
            <span style="color:#fb8d50;">每季度后15日内</span>填报。</p>
        </div>
      </div>
    </div>
    <div>
      <div class="tabcon">
        <el-tabs type="border-card" @input="handleTabClick">
          <el-tab-pane>
            <span slot="label">
              <i class="el-icon-picture" style="color: #fb8d50;margin-right:5px;"></i>{{paneTitles[0]}}</span>
            <div style="text-align:center;">
              <v-report-wljd :title="ownTitle" @getWljdDataDes="getWljdDataDes"></v-report-wljd>

            </div>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">
              <i class="el-icon-picture" style="color: #fb8d50;margin-right:5px;"></i>{{paneTitles[1]}}</span>
            <div style="text-align:center;">
              <v-report-zzjd :title="ownTitle" @getZzjdDataDes="getZzjdDataDes"></v-report-zzjd>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">
              <i class="el-icon-picture" style="color: #fb8d50;margin-right:5px;"></i>{{paneTitles[2]}}</span>
            <div style="text-align:center;">
              <v-report-zzcj :title="ownTitle"  @getZzcjDataDes="getZzcjDataDes"></v-report-zzcj>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-row>
        <el-col :span="24" style="height:50px;line-height:50px;text-align:center;padding:30px 0px;margin-bottom:30px;">
          <el-button style="width:100px;height:45px;" type="success" :disabled="sysinfo.state == 0 && (process.state == 0 || process.state == 3)? false:true" @click="onlineReportSubmit">提交季报</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import vReportWljd from "../../components/ReportWljd.vue";
import vReportZzjd from "../../components/ReportZzjd.vue";
import vReportZzcj from "../../components/ReportZzcj.vue";
import * as api from "../../api";
import { countWljdData, countZzjdData, countZzcjData } from "../../util";
export default {
  components: {
    vReportWljd,
    vReportZzjd,
    vReportZzcj
  },
  created() {
    this.loading = true;
    this.loadtext = "正在检查季报状态，请稍后...";
    this.getProcess().then(
      res => {
        setTimeout(() => {
          this.loading = false;
          if (this.sysinfo.state === 1) {
            // 本季度季报上报还未开始
            this.$alert(
                "本季度季报上报还未开始",
                "提示",
                {
                  dangerouslyUseHTMLString: true,
                  confirmButtonText: "确定"
                }
              );
          } else {
            if (this.process.state !== 0 && this.process.state !== 3) {
              this.$alert(
                "您当前季度季报已提交,当前状态为<strong style='color:" +
                  this.process.color +
                  "'>" +
                  this.process.title +
                  "</strong>，无法再次填报！",
                "提示",
                {
                  dangerouslyUseHTMLString: true,
                  confirmButtonText: "确定"
                }
              );
            }
          }
        }, 300);
      },
      error => {
        this.$message.error(error.errorMessage);
      }
    );
  },
  computed: {
    ...mapGetters([
      "wljds",
      "zzjds",
      "zzcjs",
      "userinfo",
      "sysinfo",
      "process"
    ]),
    currentYear() {
      return this.sysinfo && this.sysinfo.year
        ? this.sysinfo.year
        : new Date().getFullYear();
    },
    quarter() {
      return this.sysinfo && this.sysinfo.season ? this.sysinfo.season : 1;
    },
    ownTitle() {
      return this.currentYear + "年第" + this.quarter + "季度季报";
    }
  },
  data() {
    return {
      loading: false,
      wljddes:'',
      zzjddes:'',
      zzcjdes:'',
      loadtext: "",
      paneTitles: ["外联接待入境旅游", "组织接待国内旅游", "组织出境旅游"],
      menuTitle: "外联接待入境旅游"
    };
  },
  methods: {
    ...mapActions(["getProcess"]),
    handleTabClick(value) {
      this.menuTitle = this.paneTitles[value];
    },
    submitReport() {
      this.loading = true;
      this.loadtext = "提交报表中，请稍后...";
      let inboundWljdData = {};
      let inboundZzjdData = {};
      let outboundZzcjData = {};
      if (this.wljds.length > 0) {
        countWljdData();
        let arr = [];
        this.wljds.map(item => {
          arr.push(item.data);
        });
        inboundWljdData = {
          inboundData: JSON.stringify({
            arr,
            name: this.userinfo.userName,
            phone: this.userinfo.phoneNum
          }),
          inboundLiaisonPNum: this.wljds[0].data[0],
          inboundReceptionPNum: this.wljds[0].data[1],
          inboundLiaisonPDNum: this.wljds[0].data[2],
          inboundReceptionPDNum: this.wljds[0].data[3],
          des:this.wljddes
        };
      }
      if (this.zzjds.length > 0) {
        countZzjdData();
        let arr = [];
        this.zzjds.map(item => {
          arr.push(item.data);
        });
        inboundZzjdData = {
          internalData: JSON.stringify({
            arr,
            name: this.userinfo.userName,
            phone: this.userinfo.phoneNum
          }),
          internalOrganizePNum: this.zzjds[0].data[0],
          internalReceptionPNum: this.zzjds[0].data[1],
          internalOrganizePDNum: this.zzjds[0].data[2],
          internalReceptionPDNum: this.zzjds[0].data[3],
          des:this.zzjddes
        };
      }
      if (this.zzcjs.length > 0) {
        countZzcjData();
        let arr = [];
        this.zzcjs.map(item => {
          arr.push(item.data);
        });
        outboundZzcjData = {
          outboundData: JSON.stringify({
            arr,
            name: this.userinfo.userName,
            phone: this.userinfo.phoneNum
          }),
          outboundOrganizePNum: this.zzcjs[0].data[0],
          outboundOrganizePDNum: this.zzcjs[0].data[1],
          des:this.zzcjdes
        };
      }
      const totalData = Object.assign(
        {},
        inboundWljdData,
        inboundZzjdData,
        outboundZzcjData,
      );
      api
        .onlineReport(totalData)
        .then(
          response => {
            this.$message({
              message: response.data,
              type: "success"
            });
            if (sessionStorage.getItem("wljdarray")) {
              sessionStorage.removeItem("wljdarray");
            }
            if (sessionStorage.getItem("zzjdarr")) {
              sessionStorage.removeItem("zzjdarr");
            }
            if (sessionStorage.getItem("zzcjarr")) {
              sessionStorage.removeItem("zzcjarr");
            }
          },
          error => {
            this.$message.error(error.errorMessage);
            // this.$message.error()
          }
        )
        .finally(() => {
          this.loading = false;
        });
    },
    onlineReportSubmit() {
      this.$confirm(
        "请确认三张报表填报完成，确认请点击确定按钮。（提交后本次季报不可更改）",
        "提示",
        {
          type: "warning",
          center: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          this.submitReport();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },
    getWljdDataDes(des){
      this.wljddes = des;
    },
    getZzjdDataDes(des){
      this.zzjddes = des;
    },
    getZzcjDataDes(des){
      this.zzcjdes = des;
    }
  }
};
</script>
<style scoped>
.report {
  height: 73px;
  border: 1px solid #fb8d50;
}

.img {
  margin-left: 20px;
  margin-top: 30px;
  color: #fb8d50;
  float: left;
}

.text {
  float: left;
  margin-left: 15px;
  margin-top: 5px;
  word-break: normal;
  font-size: 13px;
}

.tabcon {
  margin-top: 40px;
  width: 100%;
}
</style>
